<template>
  <el-form
    ref="formRef"
    class="form"
    :model="innerModel"
  >
    <el-form-item
      prop="name"
      label="用户名"
      class="form-item"
    >
      <el-input
        v-model="innerModel.name"
        placeholder="请输入用户名"
      >
      </el-input>
    </el-form-item>
    <el-form-item
      prop="code"
      label="工号"
      class="form-item"
    >
      <el-input
        v-model="innerModel.code"
        placeholder="请输入工号"
        type="tel"
      >
      </el-input>
    </el-form-item>
    <el-form-item
      prop="tel"
      label="电话"
      class="form-item"
    >
      <el-input
        v-model="innerModel.tel"
        placeholder="请输入电话"
        type="tel"
      >
      </el-input>
    </el-form-item>
    <el-form-item
      prop="roleId"
      label="角色"
      class="form-item"
    >
      <el-select
        v-model="innerModel.roleId"
        placeholder="请选择一个角色"
        :loading="roleSelector.isLoading"
        clearable
        @visible-change="handleSelectorVisibleChange"
      >
        <el-option
          v-for="item in roleSelector.array"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      class="form-item"
    >
      <el-button
        icon="el-icon-search"
        type="primary"
        @click="handleQuery"
      >
        查 询
      </el-button>
      <el-button
        icon="el-icon-refresh"
        @click="handleReset"
      >
        重 置
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
/**
 * @typedef {{
 *   'code': String,
 *   'name': String,
 *   'roleId': String,
 *   'tel': String,
 * }} Model
 */
/**
 * # 查询表单
 * 用于输入查询参数，并且按找这些参数进行筛选查询用户数据
 *
 * |          表单项          |                                  作用                                  |
 * | :----------------------: | :--------------------------------------------------------------------: |
 * | `用户名`、`工号`、`电话` |                    记录用户输入的用户名、工号、电话                    |
 * |      `角色`下拉菜单      |                   记录用户在下拉菜单中选择的一个角色                   |
 * |        `查询`按钮        | 根据用户填写的表单数据查询符合条件的用户数据，并据此更新`用户数据表格` |
 * |        `重置`按钮        |                             清空`查询表单`                             |
 */
export default {
  'name': 'QueryForm',

  'props': {
    /**
     * 从父组件传来的`查询表单`的数据
     *
     * 包括`工号`、`用户名`、`角色id`和`电话`
     *
     * 这个数据不会直接使用，而是会先复制到子组件内部中，使用副本
     * @type {Model}
     */
    'model': {
      'default' () {
        return {
          'code': '',
          'name': '',
          'roleId': '',
          'tel': '',
        }
      },
      'type': Object,
    },
    /**
     * `角色选择器`
     * @type {{
     *   'array': {
     *     'label': String,
     *     'value': String,
     *   }[],
     *   'isLoading': Boolean,
     * }}
     */
    'roleSelector': {
      'default' () {
        return {
          'array': [],
          'isLoading': false,
        }
      },
      'type': Object,
    },
  },

  'data' () {
    return {
      /**
       * 内部的表单数据，真正用于展示的数据
       * @type {Model}
       */
      'innerModel': {},
    }
  },

  'created' () {
    this.setInnerModel()
  },

  'methods': {
    /**
     * 处理`查询`按钮的点击事件
     */
    'handleQuery' () {
      this.$emit('query', this.innerModel)
    },
    /**
     * 处理`重置`按钮的点击事件
     */
    'handleReset' () {
      this.$nextTick(() => {
        this.$refs.formRef.resetFields()
      })
      this.$emit('reset')
    },
    /**
     * 处理`角色选择器`显示状态切换事件
     * @param {Boolean} isVisible 选择器是否为显示状态
     */
    'handleSelectorVisibleChange' (isVisible) {
      if (!isVisible) {
        return
      }
      this.$emit('selector-show')
    },
    /**
     * 将内部的表单数据和父组件传入的表单数据参数同步
     */
    'setInnerModel' () {
      this.innerModel = {
        ...this.model,
      }
    },
  },
}
</script>

<style scoped lang="scss">
.form {
  display: flex;

  .form-item {
    display: flex;
    margin: 0 8px;
    width: 250px;
    height: 40px;
  }
}
</style>
